<template>
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-input type="number" v-model="searchForm.upper_Status" placeholder="上架状态"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button  @click="tj">添加</el-button>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="#"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="price"
          label="商品价格"
          width="80">
        </el-table-column>
        <el-table-column
          prop="Imge_url"
          label="商品图片"
          width="80">
          <template slot-scope="scope">
            <el-image
              style="width: 20px; height: 20px"
              :src="scope.row.pic"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="upper_Status"
          label="上架状态"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.upper_Status==0">上架</span>
            <span v-if="scope.row.upper_Status==1">下架</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="factory_date"
          label="出厂日期"
          width="80">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)">查看</el-button>
            <el-button @click="up(scope.row.id)">编辑</el-button>
            <el-button @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="pages"
      @current-change="currentForm">
      </el-pagination>
      <el-drawer
        title="详情!"
        :visible.sync="xiangqing"
        direction="rtl"
        size="50%">
        <el-table :data="xqForm">
          <el-table-column property="id" label="#" width="80"></el-table-column>
          <el-table-column property="name" label="商品名称" width="80"></el-table-column>
          <el-table-column property="price" label="商品价格" width="80"></el-table-column>
          <el-table-column
            prop="Imge_url"
            label="商品图片"
            width="80">
            <template slot-scope="scope">
              <el-image
                style="width: 20px; height: 20px"
                :src="scope.row.pic"></el-image>
            </template>
          </el-table-column>
          <el-table-column
          <el-table-column property="upper_Status" label="上架状态" width="80"></el-table-column>
          <el-table-column property="factory_date" label="出厂日期" width="80"></el-table-column>
        </el-table>
      </el-drawer>
      <el-drawer
        title="添加/修改!"
        :before-close="handleClose"
        :visible.sync="s"
        direction="rtl"
        size="50%">
        <div>
          <el-form :inline="true" :model="saveForm" class="demo-form-inline">
            <el-form-item label="商品名称">
              <el-input v-model="saveForm.name" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="saveForm.price" placeholder="商品价格"></el-input>
            </el-form-item>
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:9091/up/upload"
                :on-success="handleAvatarSuccess">
                <img v-if="saveForm.pic" :src="saveForm.pic" class="avatar" ref="yy">

                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="上架状态">
              <el-input v-model="saveForm.upper_Status" placeholder="上架状态"></el-input>
            </el-form-item>
            <el-form-item label="出厂日期">
              <el-date-picker type="date" placeholder="选择日期" v-model="saveForm.factory_date" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
</template>

<script>
  const axios=require("axios")
    export default {
        name: "zkList",
      data() {
        return {
          tableData: [],
          pages:0,
          searchForm:{
            pageNum:1,
            pageSize:3
          },
          xqForm:[],
          xiangqing:false,
          saveForm:{},
          s:false
        }
      },
      methods: {
          handleAvatarSuccess(res, file) {
            this.saveForm.pic=res.imgUrl;
          },
          del(id){
            let self = this
            axios({
              method:"get",
              url:"http://localhost:9091/delete",
              params:{id:id}
            }).then(function (res){
              self.getList()
            })
          },
          up(id){
            let self = this
            self.s=true
            axios({
              method:"get",
              url:"http://localhost:9091/getUpById",
              params:{id:id}
            }).then(function (res){
              console.log(res.data)
              self.saveForm=res.data;
            })
          },
          tj(){
            this.saveForm={id: null,pic:null}
            this.s=true
          },
          save(){
            let self = this
            console.log("this.saveForm:{",this.saveForm,"}")
            console.log("self.saveForm:{",self.saveForm,"}")
            alert(self.saveForm.pic)
            axios({
              method:"post",
              url:"http://localhost:9091/saveOrUpdate",
              data:self.saveForm
            }).then(function (res){
              self.getList()
              self.s=false
            })
          },
        handleClose(done) {
          if (this.loading) {
            return;
          }
          this.$confirm('确定要提交表单吗？')
            .then(_ => {
              this.loading = true;
              this.timer = setTimeout(() => {
                done();
                // 动画关闭需要一定的时间
                setTimeout(() => {
                  this.loading = false;
                }, 400);
              }, 2000);
            })
            .catch(_ => {});
        },
        handleClick(id){
          let self = this
          self.xiangqing=true;
          axios({
            method:"get",
            url:"http://localhost:9091/getListById",
            params:{id:id}
          }).then(function (res){
            self.xqForm=res.data;
          })
        },
        search(){
          this.getList();
        },
        currentForm(pageNum){
          console.log(pageNum)
          this.searchForm.pageNum=pageNum;
          this.getList();
        },
        getList(){
          let self = this
          axios({
            method:"get",
            url:"http://localhost:9091/list",
            params:self.searchForm
          }).then(function (res){
            self.tableData=res.data.list;
            self.pages=res.data.pages;
          })
        },
        handleSelectionChange(rows) {
          let ids = ""
          rows.forEach(row=>{
            if(ids!=null){
                ids+=","+row.id
            }else{
                ids+=row.id
            }
          })
        }
      },
      created(){
        this.getList()
      }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
